<template>
  <div>
    <h3 id="orderContentH3">保险统计</h3>
    <div id="echart6"></div>
  </div>
</template>

<script>
import echarts from "echarts";

export default {
  //   watch: {
  //     echart2(a, b) {
  //       this.echart2 = a;
  //       this.carried(a);
  //     },
  //     deep: true,
  //   },
  //   props: ["echart2"],
  data() {
    return {
      echartData1: [],
    };
  },
  mounted() {
    // if (this.echart2.length == 0) {
    //   return;
    // }
    this.carried();
  },
  methods: {
    carried(arr) {
      var echart2 = echarts.init(document.querySelector("#echart6"));
      echart2.clear(); //先清除图表
      echart2.setOption(this.option(), true); //再设置配置
      echart2.hideLoading(); //关闭loading
    },
    option() {
      return {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        legend: {
          data: ["蒸发量", "降水量", "平均温度"],
        },
        xAxis: [
          {
            type: "category",
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "水量",
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
              formatter: "{value} ml",
            },
          },
          {
            type: "value",
            name: "温度",
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
              formatter: "{value} °C",
            },
          },
        ],
        series: [
          {
            name: "蒸发量",
            type: "bar",
            data: [
              2.0,
              4.9,
              7.0,
              23.2,
              25.6,
              76.7,
              135.6,
              162.2,
              32.6,
              20.0,
              6.4,
              3.3,
            ],
          },
          {
            name: "降水量",
            type: "bar",
            data: [
              2.6,
              5.9,
              9.0,
              26.4,
              28.7,
              70.7,
              175.6,
              182.2,
              48.7,
              18.8,
              6.0,
              2.3,
            ],
          },
          {
            name: "平均温度",
            type: "line",
            yAxisIndex: 1,
            data: [
              2.0,
              2.2,
              3.3,
              4.5,
              6.3,
              10.2,
              20.3,
              23.4,
              23.0,
              16.5,
              12.0,
              6.2,
            ],
          },
        ],
      };
    },
  },
};
</script>
<style scoped>
#echart6 {
  width: 90%;
  height: 300px;
}
#orderContentH3 {
  width: 95%;
  margin: 0 auto;
  padding-top: 20px;
}
</style>